<template>
  <div class="box">
    <h1>组件间通信: provide + inject</h1>
    <div>content1:{{ content1 }}</div>
    <div>content2:{{ content2.name }}</div>
    <button @click="changeContent1">按钮1</button><br>
    <button @click="changeContent2">按钮2</button>

    <Child />
  </div>
</template>

<script lang="ts" setup>
// provide 和 inject
// 和vue2中几乎一样,可以理解成广播,就是写法上有些许差异
// --------------------------------------------------
// 我们使用的数据是一个ref对象,ref对象也是对象
// 通过 provide 传递给后代的是 ref 对象的地址
// 当我们修改这个 ref对象 的.value属性的时候,对象的地址并没有变化
// 所以后代可以接收到
// 和我们广播只广播一次不冲突***
import { provide, reactive, ref } from 'vue';
import Child from './Child.vue'

const content1 = ref('jack')
const content2 = ref({
  name: 'rose'
})

// 参数一: 广播的数据名,广播的数据名在后代组件中使用inject接收的
// 参数二: 真正的数据
provide('abc', content1)
provide('content2', content2)


const changeContent1 = () => {
  content1.value = 'jerry'
}

const changeContent2 = () => {
  content2.value.name = 'Tony'
}
</script>
